import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_toast.dart';
import 'xin_he_flash_sale_goods_detail_logic.dart';

class XinHeFlashSaleGoodsDetailPage extends StatelessWidget {
  XinHeFlashSaleGoodsDetailPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeFlashSaleGoodsDetailLogic());
  final state = Get.find<XinHeFlashSaleGoodsDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Stack(children: [
          ListView(
            padding: EdgeInsets.zero,
            children: [

              ///图片banner
              Listener(
                onPointerDown: logic.getPointDownListenerInHorizontal(),
                onPointerUp: logic.getPointUpListenerInHorizontal(),
                child: SizedBox(
                  height: 300,
                  width: Get.width,
                  child: ListView.builder(
                      padding: EdgeInsets.zero,
                      itemCount: state.images.length,
                      scrollDirection: Axis.horizontal,
                      controller: logic.scrollController,
                      itemBuilder: (ctx,index){
                        return GestureDetector(
                          onTap: ()async{

                            Map map = {'images':state.images.value,'index':index};
                            String json = jsonEncode(map);
                            Get.toNamed(XinHeRoutes.goodsDetailBannerScan,arguments: logic.test,parameters:{'data':json});

                            // await Navigator.of(context).push(XinHeFadeRoute(page: XinHePhotoGalleryScanPage(imagesList: state.images.value,currentIndex: index,))).then((value) => {})
                                ;
                          },
                          child: Container(
                            color: Colors.white,
                            width: Get.width,
                            height: 300,
                            child: XinHeAssetImage('assets/images/adopt/bg_${index+1}.png',fit: BoxFit.contain,),
                          ),
                        );
                      }
                  ),),
              ),


              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 15),
                // padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 0),
                decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
                child:  Column(children: [


                  Stack(children: [
                    XinHeAssetImage('assets/images/home/vs_bg.png',width: Get.width-30,height: 60/345*(Get.width-30),),
                    Container(
                      width: Get.width-30,
                      height: 60/345*(Get.width-30),
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          SizedBox(
                            width: (Get.width-60)*0.5,
                            child: RichText(
                                text: TextSpan(children: [
                                  ///￥
                                  TextSpan(
                                    text: '￥',
                                    style: TextStyle(
                                      color: XinHeColor('#E84128'),
                                      fontSize: 9,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),

                                  ///
                                  TextSpan(
                                    text: '28.83',
                                    style: TextStyle(
                                      color: XinHeColor('#E84128'),
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),

                                ]
                                )),
                          ),

                          SizedBox(
                            width: (Get.width-60)*0.5,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text('距离活动结束还剩：',style: TextStyle(color: XinHeColor('#E84128'),fontSize: 13,fontWeight: FontWeight.w500),),
                                _countdownWidget()

                              ],),
                          )

                        ],),
                    )
                  ],),



                  ///标题 收藏 分享
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.only(right: 15),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(height: 10,),
                                Text('绿色食品认证纯山茶油250ML压 榨一级食用油茶籽油',maxLines: 2,style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 17,fontWeight: FontWeight.w600),softWrap: true,),
                                SizedBox(height: 10,),
                                RichText(
                                    text: TextSpan(children: [
                                      ///￥
                                      TextSpan(
                                        text: '￥',
                                        style: TextStyle(
                                          color: XinHeColor('#E84128'),
                                          fontSize: 9,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),

                                      ///
                                      TextSpan(
                                        text: '28.83',
                                        style: TextStyle(
                                          color: XinHeColor('#E84128'),
                                          fontSize: 16,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),

                                    ]
                                    )),
                                SizedBox(height: 15,)


                              ],),
                          ),
                        ),
                        SizedBox(
                          width: 30,
                          child: Column(
                            children: [
                              const XinHeAssetImage('assets/images/home/favor.png',width: 18,height: 18,),
                              Text('收藏',style: TextStyle(color: XinHeColor('#A8B0B0'),fontSize: 11),)
                            ],
                          ),
                        ),
                        SizedBox(width: 15,),
                        SizedBox(
                          width: 30,
                          child: Column(
                            children: [
                              const XinHeAssetImage('assets/images/home/share.png',width: 18,height: 18,),
                              Text('分享',style: TextStyle(color: XinHeColor('#A8B0B0'),fontSize: 11),)
                            ],
                          ),
                        ),


                      ],),
                  )
                ],),
              ),

              ///规格、发货、保障
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 0),
                decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Column(children: [

                    Row(children: [
                      Text('选择规格',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text(' >',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),)

                    ],),

                    const SizedBox(height: 10,),
                    Row(children: [
                      Text('发货',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text('广东/深圳',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),)

                    ],),
                    const SizedBox(height: 10,),

                    Row(children: [
                      Text('保障',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text('49小时退换货',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 13,fontWeight: FontWeight.w500),)

                    ],),

                  ],),
                ),),


              Container(
                  margin: const EdgeInsets.only(left: 15,right: 15,top: 15),
                  child: XinHeAssetImage('assets/images/adopt/bg_1.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),
              Container(
                  margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 0),
                  child: XinHeAssetImage('assets/images/adopt/bg_2.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),
              Container(
                  margin:  EdgeInsets.only(left: 15,right: 15,bottom: 15+60+Get.mediaQuery.padding.bottom),
                  child: XinHeAssetImage('assets/images/adopt/bg_3.png',width: Get.width-30,fit: BoxFit.fitWidth,)
              ),

            ],),
        ],),

        ///顶部bar
        Positioned(
          left: 10,
          top: Get.mediaQuery.padding.top,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            child: GestureDetector(
              onTap: (){
                Get.back();
              },
              child: Container(
                height: 44,
                width: 40,
                color: Colors.transparent,
                alignment: Alignment.centerLeft,
                child: XinHeAssetImage(
                  'assets/images/home/app_back_3.png',
                  width: 9.5,
                  height: 17,
                  fit: BoxFit.cover,),
              ),
            ),
          ),
        ),

        ///底部bar
        Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 60+Get.mediaQuery.padding.bottom,
              padding: EdgeInsets.symmetric(horizontal: 15),
              color: Colors.white,
              alignment: Alignment.center,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 60,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: (){
                            Get.toNamed(XinHeRoutes.sellerShop);
                          },
                          child: Center(
                            child: Column( mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const XinHeAssetImage('assets/images/home/shop_icon.png',width: 26,height: 26,),
                                const SizedBox(height: 2,),
                                Text('店铺',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 12,fontWeight: FontWeight.w500),)
                              ],),
                          ),
                        ),
                        const SizedBox(width: 25,),
                        GestureDetector(
                          onTap: (){
                            XinHeToast.center('正在开发，敬请期待');
                          },
                          child: Container(
                            color: Colors.transparent,
                            child: Column(mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const XinHeAssetImage('assets/images/home/service_icon.png',width: 26,height: 26,),
                                const SizedBox(height: 2,),
                                Text('客服',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 12,fontWeight: FontWeight.w500),)
                              ],),
                          ),
                        ),
                        const Spacer(),

                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          alignment: Alignment.center,
                          height: 42,
                          width: 233,
                          decoration:  BoxDecoration(
                            // color: Colors.white,
                            gradient: LinearGradient(colors: [XinHeColor('#F89A30'),XinHeColor('#E84128')]),
                            border: Border.all(color: XinHeColor('#FF892F'),width: 0.5),
                            borderRadius:  BorderRadius.circular(21),
                          ),
                          child: Text('立即购买',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w600,fontSize: 17),strutStyle: StrutStyle(forceStrutHeight: true),),

                        ),

                      ],
                    ),
                  ),
                ],),

            ))

      ],),
    );
  }

  Widget _countdownWidget() {
    return  Obx(() => Container(
      width: 18*3+18,
      height: 18,
      child: Row(
        children: [
          Container(
            width:18,
            decoration: BoxDecoration(color: XinHeColor('#E84128'),borderRadius: BorderRadius.circular(2)),
            alignment: Alignment.center,
            child: Text(logic.snapUpHour.value,style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),
          ),
          Container(
            width: 9,
            alignment: Alignment.center,
            child: Text(':',style: TextStyle(color: XinHeColor('#E84128'),fontSize: 12,fontWeight: FontWeight.w500),),
          ),
          Container(
            width:18,
            decoration: BoxDecoration(color: XinHeColor('#E84128'),borderRadius: BorderRadius.circular(2)),
            alignment: Alignment.center,
            child: Text(logic.snapUpMinute.value,style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),
          ),
          Container(
            width: 9,
            alignment: Alignment.center,
            child: Text(':',style: TextStyle(color: XinHeColor('#E84128'),fontSize: 12,fontWeight: FontWeight.w500),),
          ),
          Container(
            width:18,
            decoration: BoxDecoration(color: XinHeColor('#E84128'),borderRadius: BorderRadius.circular(2)),
            alignment: Alignment.center,
            child: Text(logic.snapUpSecond.value,style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),
          ),
        ],),
    ));
  }
}
